<template>
	<view class="container">
		<view class="header">
			<text class="title">学习报告</text>
			<text class="subtitle">您的学习数据分析</text>
		</view>

		<!-- 时间范围选择 -->
		<view class="time-selector">
			<uni-button size="mini" :type="timeRange === 'weekly' ? 'primary' : 'default'" @tap="switchTimeRange('weekly')">本周</uni-button>
			<uni-button size="mini" :type="timeRange === 'monthly' ? 'primary' : 'default'" @tap="switchTimeRange('monthly')">本月</uni-button>
		</view>

		<!-- 学习概览 -->
		<view class="overview-section">
			<text class="section-title">学习概览</text>
			<view class="overview-grid">
				<view class="overview-item">
					<text class="overview-value">{{ reportData.totalHours }}</text>
					<text class="overview-label">学习时长(小时)</text>
				</view>
				<view class="overview-item">
					<text class="overview-value">{{ reportData.totalCourses }}</text>
					<text class="overview-label">学习课程</text>
				</view>
				<view class="overview-item">
					<text class="overview-value">{{ reportData.completionRate }}%</text>
					<text class="overview-label">完成率</text>
				</view>
				<view class="overview-item">
					<text class="overview-value">{{ reportData.avgScore }}</text>
					<text class="overview-label">平均分</text>
				</view>
			</view>
		</view>

		<!-- 学习趋势 -->
		<view class="trend-section">
			<text class="section-title">学习趋势</text>
			<view class="trend-chart">
				<view v-for="(item, index) in reportData.trendData" :key="index" class="trend-item">
					<view class="trend-bar" :style="{ height: (item.hours / maxHours) * 100 + '%' }"></view>
					<text class="trend-label">{{ item.date }}</text>
				</view>
			</view>
		</view>

		<!-- 课程详情 -->
		<view class="course-section">
			<view class="section-header">
				<text class="section-title">课程详情</text>
				<uni-button size="mini" @tap="viewAllCourses">查看全部</uni-button>
			</view>
			<view class="course-list">
				<view v-for="course in reportData.courseDetails" :key="course.courseId" class="course-item" @tap="viewCourseDetail(course.courseId)">
					<view class="course-info">
						<text class="course-name">{{ course.title }}</text>
						<text class="course-meta">老师：{{ course.teacherName }} · 进度：{{ course.progress }}%</text>
					</view>
					<view class="course-score">
						<text class="score">{{ course.score }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 学习建议 -->
		<view class="suggestion-section">
			<text class="section-title">学习建议</text>
			<view class="suggestion-list">
				<view v-for="(suggestion, index) in reportData.suggestions" :key="index" class="suggestion-item">
					<uni-icons type="lightbulb" size="16" color="#fa8c16"></uni-icons>
					<text class="suggestion-text">{{ suggestion }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted, computed } from 'vue';

	const timeRange = ref('weekly');
	const reportData = ref({
		totalHours: 0,
		totalCourses: 0,
		completionRate: 0,
		avgScore: 0,
		trendData: [],
		courseDetails: [],
		suggestions: []
	});

	const maxHours = computed(() => {
		if (reportData.value.trendData.length === 0) return 1;
		return Math.max(...reportData.value.trendData.map(item => item.hours));
	});

	// 前端人员：获取学习报告数据
	// BACKEND REQUIRED
	// GET /api/reports/learning?range=weekly|monthly
	// Response 200
	// {
	//   "success": true,
	//   "data": {
	//     "totalHours": 24.5,
	//     "totalCourses": 8,
	//     "completionRate": 85,
	//     "avgScore": 92,
	//     "trendData": [
	//       { "date": "周一", "hours": 3.5 },
	//       { "date": "周二", "hours": 4.2 },
	//       { "date": "周三", "hours": 2.8 }
	//     ],
	//     "courseDetails": [
	//       {
	//         "courseId": "COURSE_001",
	//         "title": "高等数学第3讲",
	//         "teacherName": "张老师",
	//         "progress": 75,
	//         "score": 95
	//       }
	//     ],
	//     "suggestions": [
	//       "建议增加数学练习时间",
	//       "可以尝试更多实践课程"
	//     ]
	//   }
	// }
	const fetchReport = () => {
		uni.request({
			url: '/api/reports/learning',
			method: 'GET',
			data: { range: timeRange.value },
			success: (res: any) => {
				if (res.data?.success) {
					reportData.value = res.data.data;
				}
			}
		});
	};

	// 前端人员：获取课程详细报告
	// BACKEND REQUIRED
	// GET /api/reports/learning/detail?courseId=课程ID
	// Response 200
	// {
	//   "success": true,
	//   "data": {
	//     "courseId": "COURSE_001",
	//     "title": "高等数学第3讲",
	//     "teacherName": "张老师",
	//     "progress": 75,
	//     "score": 95,
	//     "watchTime": 5400, // 观看时长（秒）
	//     "lastWatchTime": "2025-08-26 20:12:00",
	//     "chapterProgress": [
	//       { "chapter": "第一章", "progress": 100 },
	//       { "chapter": "第二章", "progress": 80 }
	//     ]
	//   }
	// }
	const viewCourseDetail = (courseId: string) => {
		uni.navigateTo({ 
			url: `/pages/report/course-detail?courseId=${courseId}` 
		});
	};

	const switchTimeRange = (range: string) => {
		timeRange.value = range;
		fetchReport();
	};

	const viewAllCourses = () => {
		uni.navigateTo({ url: '/pages/report/course-list' });
	};

	onMounted(fetchReport);
</script>

<style>
	.container { padding: 30rpx; }
	.header { margin-bottom: 30rpx; }
	.title { font-size: 20px; font-weight: 700; color: #333; }
	.subtitle { font-size: 14px; color: #666; display: block; margin-top: 8rpx; }
	.time-selector { display: flex; gap: 12rpx; margin-bottom: 30rpx; }
	.section-title { font-size: 18px; font-weight: 600; color: #333; display: block; margin-bottom: 16rpx; }
	.overview-section { margin-bottom: 30rpx; }
	.overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16rpx; }
	.overview-item { background: #fff; border-radius: 14rpx; padding: 20rpx; text-align: center; box-shadow: 0 2rpx 10rpx rgba(0,0,0,.05); }
	.overview-value { font-size: 24px; font-weight: 700; color: #1890ff; display: block; }
	.overview-label { font-size: 12px; color: #666; margin-top: 8rpx; }
	.trend-section { margin-bottom: 30rpx; }
	.trend-chart { display: flex; gap: 8rpx; align-items: end; height: 120rpx; background: #f8f9fa; border-radius: 10rpx; padding: 20rpx; }
	.trend-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8rpx; }
	.trend-bar { width: 100%; background: linear-gradient(to top, #1890ff, #40a9ff); border-radius: 4rpx; min-height: 4rpx; }
	.trend-label { font-size: 10px; color: #666; }
	.course-section { margin-bottom: 30rpx; }
	.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16rpx; }
	.course-list { background: #fff; border-radius: 14rpx; padding: 20rpx; box-shadow: 0 2rpx 10rpx rgba(0,0,0,.05); }
	.course-item { display: flex; justify-content: space-between; align-items: center; padding: 16rpx 0; border-bottom: 1px solid #f0f0f0; }
	.course-item:last-child { border-bottom: none; }
	.course-info { display: flex; flex-direction: column; gap: 4rpx; }
	.course-name { font-size: 16px; font-weight: 600; color: #333; }
	.course-meta { font-size: 12px; color: #999; }
	.course-score { display: flex; align-items: center; }
	.score { font-size: 18px; font-weight: 700; color: #52c41a; }
	.suggestion-section { margin-bottom: 30rpx; }
	.suggestion-list { background: #fff; border-radius: 14rpx; padding: 20rpx; box-shadow: 0 2rpx 10rpx rgba(0,0,0,.05); }
	.suggestion-item { display: flex; align-items: center; gap: 12rpx; padding: 12rpx 0; border-bottom: 1px solid #f0f0f0; }
	.suggestion-item:last-child { border-bottom: none; }
	.suggestion-text { font-size: 14px; color: #666; line-height: 1.4; }
</style>



